---
title: AssistantModal
---

import { Steps, Step } from "fumadocs-ui/components/steps";
import { Tabs, Tab } from "fumadocs-ui/components/tabs";

## Overview

A chat bubble shown in the bottom right corner of the screen. Useful for support or Q&A use cases.

## Getting Started

<Steps>
  <Step>

### Install `@assistant-ui/react-ui`

```sh npm2yarn
npm install @assistant-ui/react-ui
```

  </Step>
  <Step>

### Import CSS styles

Add the following to your `tailwind.config.ts`:

<Tabs items={["Tailwind", "Tailwind + shadcn-ui", "Not using Tailwind"]}>

```ts title="/tailwind.config.ts" tab="Tailwind"
{
  plugins: [
    require("tailwindcss-animate"), // make sure to "npm install tailwindcss-animate"
    require("@assistant-ui/react-ui/tailwindcss")({
      components: ["assistant-modal"],
    })
  ],
}
```

```ts title="/tailwind.config.ts" tab="Tailwind + shadcn-ui"
{
  plugins: [
    require("tailwindcss-animate"), // make sure to "npm install tailwindcss-animate"
    require("@assistant-ui/react-ui/tailwindcss")({
      components: ["assistant-modal"],
      shadcn: true
    })
  ],
}
```

```ts title="/app/layout.tsx" tab="Not using Tailwind"
import "@assistant-ui/react-ui/styles/index.css";
import "@assistant-ui/react-ui/styles/modal.css";
```

</Tabs>

  </Step>
  <Step>

### Use it in your app

```tsx title="/app/page.tsx"
import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
import { AssistantModal } from "@assistant-ui/react-ui";

const MyApp = () => {
  const runtime = useChatRuntime({
    api: "/api/chat",
  });

  return (
    <div>
      <AssistantModal runtime={runtime} />
    </div>
  );
};
```

  </Step>
</Steps>
